<!-- 首页 -->
<template>
  <div id="homepage">
    <!-- <div style="position: fixed;z-index: -1;top: 14.3%;left:61%;width: 298px;height: 395px;background-color: #fafafa;display: flex;align-items: center;justify-content: center">
      <p style="font-size: 27px;margin: 0;text-align: center;color: #999999">暂无数据</p>
    </div>
    <div style="position: fixed;z-index: -1;top: 14.3%;left:24%;width: 695px;height: 720px;background-color: #fafafa;display: flex;align-items: center;justify-content: center">
      <p style="font-size: 30px;margin: 0;text-align: center;color: #999999">暂无数据</p>
    </div> -->


    <div class="background"></div>
    <div class="home-container">
      <div class="home-left">
        <div class="home-left-nav">
          <span
            :class="{ active: homenavselected == 1 }"
            @click="changePostsOrigin(1)"
            >推荐</span
          >
          <span
            :class="{ active: homenavselected == 2 }"
            @click="changePostsOrigin(2)"
            >关注</span
          >
        </div>
        <topics :topicData="posts" :operationBarVis="true" :hidden="false" ></topics>

      </div>
      <div class="home-right">
        <div class="home-right-top">
          <div class="home-right-top-title">
            <h6>推荐社区</h6>
          </div>
          <subcommunity :cardData="subcommunity" > </subcommunity>

        </div>
        <div class="home-right-bottom">
          <div class="home-right-op" @click="pageRedirect('/postpage')">
            <svg class="icon icon-hrbo" aria-hidden="true">
              <use xlink:href="#icon-cmquestionnaire"></use>
            </svg>
            <span>发布</span>
          </div>
          <div
            class="home-right-op"
            @click="
              pageRedirect('/usercenter?userNo=' + user.userNo + '&choice=2')
            "
          >
            <svg
              class="icon icon-hrbo"
              aria-hidden="true"
              style="color: rgb(105, 121, 251)"
            >
              <use xlink:href="#icon-cmshoucang3"></use>
            </svg>
            <span>收藏</span>
          </div>
          <div
            class="home-right-op"
            @click="
              pageRedirect('/usercenter?userNo=' + user.userNo + '&choice=1')
            "
          >
            <svg
              class="icon icon-hrbo"
              aria-hidden="true"
              style="color: rgb(4, 143, 250); font-size: 22px"
            >
              <use xlink:href="#icon-cmlishi2"></use>
            </svg>
            <span>我的创作</span>
          </div>
          <div class="home-right-op">
            <svg
              class="icon icon-hrbo"
              aria-hidden="true"
              style="color: rgb(4, 143, 250)"
            >
              <use xlink:href="#icon-cmjingqingqidai"></use>
            </svg>
            <span>开发中</span>
          </div>
          <div class="home-right-op">
            <svg
              class="icon icon-hrbo"
              aria-hidden="true"
              style="color: rgb(4, 143, 250)"
            >
              <use xlink:href="#icon-cmjingqingqidai"></use>
            </svg>
            <span>开发中</span>
          </div>
          <div class="home-right-op">
            <svg
              class="icon icon-hrbo"
              aria-hidden="true"
              style="color: rgb(4, 143, 250)"
            >
              <use xlink:href="#icon-cmjingqingqidai"></use>
            </svg>
            <span>开发中</span>
          </div>
        </div>
      </div>
    </div>

    <!-- <confirmwindow></confirmwindow> -->
  </div>
</template>

<script>
import Topics from "../components/common/topics.vue";
import Subcommunity from "../components/homecomponents/subcommunity.vue";
import { mapGetters, mapMutations } from "vuex";
import { handleTopics } from "../utils/utils";
// import Confirmwindow from '../components/common/pop/confirmwindow.vue';

export default {
  data() {
    return {
      homenavselected: 1,
      posts: "",
      subcommunity: "",
    };
  },

  components: { Topics, Subcommunity },

  computed: {
    ...mapGetters(["user", "subCommunities"]),
  },

  methods: {
    initWebSocket(){//初始化websocket
      this.websock = new WebSocket("ws:39.105.106.111:8080/community/websocket/" + window.localStorage.getItem('userNo'));//这里面的this都指向vue
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketonclose;
      this.websock.onmessage = this.websocketonmessage;
    },
    websocketonopen(){ //打开连接
      console.log("WebSocket连接成功")
    },
    websocketonerror(){ //连接失败
      console.log("WebSocket连接失败");
    },
    websocketonclose(){ //关闭连接
      console.log("WebSocket关闭");
    },
    pageRedirect(url) {
      this.$router.push(url);
    },
    changePostsOrigin(choice) {
      //切换首页展示帖子来源
      const that = this;
      let choicetrue = Number(choice);
      switch (choicetrue) {
        case 1: {
          this.homenavselected = 1;
          this.$getApi.getUserRecommandation(this.user).then((res) => {
            console.log("shift");
            that.posts = res.data.posts;
            that.posts = handleTopics(
              res.data.posts,
              res.data.like,
              res.data.collection
            );
            let subcom = res.data.communityInformation;
            console.log(subcom);
            that.setSubCommunities(subcom);
            that.subcommunity = res.data.communityInformation;
          });
          break;
        }
        case 2: {
          this.homenavselected = 2;
          this.$getApi.getUserLikePosts(this.user).then((res) => {
            that.posts = res.data.posts;
            that.posts = handleTopics(
              res.data.posts,
              res.data.like,
              res.data.collection
            );
            let subcom = res.data.communityInformation;
            console.log(subcom);
            //   that.setSubCommunities(subcom)
            //   that.subcommunity = res.data.communityInformation
          });
          break;
        }
      }
    },
    ...mapMutations(["setSubCommunities"]),
  },
  created() {
    this.changePostsOrigin(1);
    this.initWebSocket();
  },
};
</script>
<style>
::-webkit-scrollbar {
  display: none;
}
/* #homepage{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
} */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(242, 245, 247);
  z-index: -20;
}
.home-container {
  display: flex;
  align-items: flex-start;
  margin: 5rem auto;
  padding: 0 16px;
  width: 1000px;
  /* height: 80%; */
  position: relative;
  z-index: 100;
}
.home-left {
  position: relative;
  margin: 2px;
  min-width: 695px;
  /* max-height: 680px; */
  /* overflow-y: scroll; */
  overflow-x: hidden;
  z-index: 101;
}
.home-left-nav {
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
  width: 655px;
  min-width: 655px;
  min-height: 50px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(30px);
  padding: 5px 20px;
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}
.home-left-nav > span {
  padding: 0px 20px;
}
.home-right {
  margin: 2px 2px 2px 13px;
  min-width: 298px;
  max-height: 658px;
  position: sticky;
  top: calc(5rem + 2px);
  overflow: hidden;
  z-index: 10;
}
.home-right-top {
  height: 448px;
  margin-bottom: 10px;
  overflow: scroll;
  width: 100%;
}
.home-right-top-title {
  background-color: white;
  width: 100%;
  height: 40px;
  padding: 10px 0;
  display: flex;
  align-items: center;
}
.home-right-top > .home-right-top-title > h6 {
  border-left: 5px rgb(80, 80, 255) solid;
  font-size: 16px;
  font-weight: 600;
  padding: 0 20px;
  margin: 0;
}
.home-right-bottom {
  box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
  height: 160px;
  min-width: 298px;
  background-color: white;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.home-right-op {
  width: 90px;
  height: 60px;
  padding: 5px 1px;
  flex: 1 0 90px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.icon-hrbo {
  font-size: 20px;
}
.active {
  color: rgb(4, 143, 250);
}
</style>
